<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="/static/base/common/css/sapar.css" />
    <link rel="stylesheet" type="text/css" href="/static/base/common/css/common.css" />
    <script type="text/javascript" src="/static/base/common/js/jquery.js"></script>
    <script type="text/javascript" src="/static/base/common/js/sapar.js"></script>
    <script type="text/javascript" src="/static/base/common/js/WdatePicker.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/webjars/layui/css/layui.css" media="all"/>

    <title>居民与房屋管理</title>
</head>

<body class="layui-layout-body" >
<div class="subfiled clearfix">
    <h2>居民与房屋管理</h2>
</div>
<div class="demoTable" style="margin-top: 5px">
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" placeholder="输入姓名、电话或身份证号" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>

<div >
    <table id="peopleHouseInfo" lay-filter="peopleHouseInfo1"></table>
</div>
<script type="text/html" id="barDemo">
    <button class="layui-btn layui-btn-xs" lay-event="detail" target="_blank">详细</button>
    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="update" target="_blank">修改</button>
</script>

</body>
<script src="/static/webjars/layui/layui.js"></script>
<script>



    layui.use(['layer','table'], function(){
        var layer = layui.layer
            ,table = layui.table;

        var limitNum = 15;
        var limitNums = [15,30,45,60,75,90]

        table.render({
            elem: '#peopleHouseInfo'
            ,url: '/ajax/house/userInfo/getPubUser-limit'
            ,limit: limitNum
            ,limits: limitNums
            ,height:500
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,groups: 1 //只显示 1 个连续页码
                ,first: false //不显示首页
                ,last: false //不显示尾页
            }
            ,method: 'post'
            ,request: {
                pageName: 'limitPage' //页码的参数名称，默认：page
                ,limitName: 'limitNum' //每页数据量的参数名，默认：limit
            }
            ,response: {
                statusName: 'res' //数据状态的字段名称，默认：code
                ,statusCode: 1 //成功的状态码，默认：0
                ,msgName: 'code' //状态信息的字段名称，默认：msg
                ,countName: 'count' //数据总数的字段名称，默认：count
                ,dataName: 'data' //数据列表的字段名称，默认：data
            }
            ,cols: [[ //表头
                {field: 'userId' , width: 100, title:'ID'}
                ,{field:'name',width: 150, title: '户主名称'}
                ,{field:'sex', width: 100, title: '性别'}
                ,{field:'telphone' ,width: 200,title: '联系电话'}
                ,{field:'workStatus',width: 150,title: '工作状况'}
                ,{field:'addr',title: '详细地址'}
                ,{title:'操作',width:200,fixed: 'right', toolbar: '#barDemo'}
            ]]
        });





        table.on('tool(peopleHouseInfo1)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                window.open("/house/inhabitantDetails?id="+data.userId);
                //可以在这里跳转到处理器处理后返回页面
                // layer.msg('ID：'+ data.id + ' 的查看操作');
                // layer.open({
                //     type: 2,
                //     title: '居民详细信息',
                //     btn: ['确定', '取消'],
                //     btnAlign: 'c',
                //     maxmin: true,
                //     shadeClose: true, //点击遮罩关闭层
                //     area: ['50%', '60%'],
                //     content: '/house/inhabitantDetails',
                //     btn1: function (index, layero) {
                //
                //     }
                // });
            } else if(obj.event === 'update'){
                window.open("/house/updatePeopleDetail?id="+data.userId);

            } else if(obj.event === 'delete'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            }
        });

        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');
                console.log(demoReload.val());
                table.reload('peopleHouseInfo',{
                    url: '/ajax/house/userInfo/search-User',
                    where:{
                        keyword:demoReload.val()
                        ,pageName: 'limitPage'
                        ,limitName: 'limitNum'
                    }
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,method: 'post'
                    ,response: {
                        statusName: 'res' //数据状态的字段名称，默认：code
                        ,statusCode: 1 //成功的状态码，默认：0
                        ,msgName: 'code' //状态信息的字段名称，默认：msg
                        ,countName: 'count' //数据总数的字段名称，默认：count
                        ,dataName: 'data' //数据列表的字段名称，默认：data
                    }
                    ,cols: [[ //表头
                        {field: 'userId' , width: 100, title:'ID'}
                        ,{field:'name',width: 150, title: '姓名'}
                        ,{field:'sex', width: 100, title: '性别'}
                        ,{field:'telphone' ,width: 200,title: '联系电话'}
                        ,{field:'workStatus',width: 150,title: '工作状况'}
                        ,{field:'addr',title: '详细地址'}
                        ,{title:'操作',width:200,fixed: 'right', toolbar: '#barDemo'}
                    ]]
                });
            }

        };



        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';

        });

    });
</script>


<script type="text/javascript">
    $('select').iSelect();
</script>
</html>